.sixPage {
    box-sizing: border-box;

    .headerTabs {
        :deep(.van-tabs__line) {
            background: url("../../assets/images/ColorfulLottery/smile.png") no-repeat;
            background-size: contain;
            width: 24.5rem;
            height: 5rem;
        }
    }

    .moneyNum {
        padding: 12rem 16rem 12rem 16rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: white;

        .moneyItem {
            background: url("../../assets/images/ColorfulLottery/moneyBg.png") no-repeat;
            background-size: contain;
            width: 30rem;
            height: 30rem;
            color: #FF2D55;
            text-align: center;
            font-family: DIN;
            font-size: 12rem;
            line-height: 30rem;
            font-weight: 700;

            &:not(:first-child) {
                margin-left: 15rem;
            }

            &.moneyActive {
                background: url("../../assets/images/ColorfulLottery/activeMoneyBg.png") no-repeat;
                width: 30rem;
                height: 30rem;
                background-size: contain;
            }
        }

        .inputMoney {
            display: flex;
            margin-left: 15rem;
            align-items: center;
            position: relative;

            img {
                width: 30rem;
                height: 30rem;
                z-index: 2;
            }

            &>input {
                border-radius: 6rem;
                border: 1rem solid #D8DFE7;
                background: #F1F5F9;
                width: 90rem;
                line-height: 24rem;
                position: absolute;
                left: 20rem;
                text-indent: 10rem;
                color: #FF2D55;
                font-family: DIN;
                font-size: 14rem;
                font-style: normal;
                font-weight: 700;

                ::placeholder {
                    color: #647282;
                    text-align: center;
                    font-family: DIN;
                    font-size: 12rem;
                    font-weight: 500;
                }

                &:focus {
                    outline: none;
                }
            }
        }
    }

    .bottomInfo {
        padding: 16rem;
        box-sizing: border-box;
        margin-bottom: 50rem;

        .countdown {
            border-radius: 12rem;
            padding: 12rem;
            box-sizing: border-box;
            width: 100%;
            background: linear-gradient(93deg, #FF8474 2.79%, #FE5375 100%);

            .topTime {
                display: flex;
                align-items: center;

                &.result {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;

                    .top {
                        display: flex;
                        flex-direction: row;
                        margin-bottom: 9rem;
                    }
                }

                .leftNum {
                    width: 142rem;
                    color: #FFE8EE;
                    font-family: Inter;
                    font-size: 14rem;
                }

                .dateTime {
                    color: #FFE8EE;
                    font-family: Inter;
                    font-size: 12rem;
                    font-style: normal;
                    font-weight: 500;
                }

                .timeData {
                    display: flex;
                    align-items: center;
                    margin-left: auto;
                    float: right;
                    color: white;

                    .timeInfo {
                        width: 30rem;
                        line-height: 26rem;
                        background: #FFF;
                        border-radius: 8rem;
                        color: #FF2D55;
                        text-align: center;
                        font-family: Inter;
                        font-size: 16rem;
                        font-weight: 600;
                        margin: 0rem 5rem;
                    }

                    :last-child {
                        margin: 0rem 0rem 0 5rem;
                    }
                }

                .resultData {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .numItem {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        &>p:first-child {
                            background-color: white;
                            width: 20rem;
                            height: 20rem;
                            border-radius: 50%;
                            line-height: 20rem;
                            text-align: center;
                            color: #FF2D55;
                            font-family: Inter;
                            font-size: 12rem;
                            font-weight: 600;
                            position: relative;
                        }

                        &>p:last-child {
                            margin-top: 4rem;
                            color: #FFF;
                            font-size: 12rem;
                            font-weight: 500;
                        }

                        &:last-child>p::before {
                            content: '+';
                            position: absolute;
                            color: #FFF;
                            left: -20rem;
                        }
                    }
                }
            }

            .line {
                height: 1rem;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.20);
                margin: 7rem 0rem;
            }
        }

        .typeTabs {
            margin-top: 16rem;

            ::v-deep(.van-tabs__nav--card) {
                border: none;
                background: transparent;
                margin: 0;
            }

            ::v-deep(.van-tab--card) {
                border: 1rem solid#D8DFE7;
                border-radius: 15rem;
                font-size: 14rem;
                padding: 0 14rem;
                color: #797B89;
            }

            ::v-deep(.van-tab--card+.van-tab--card) {
                margin-left: 15rem;
            }

            ::v-deep(.van-tab--active) {
                background: #F90;
                border-color: #F90;
                color: #FFF;
            }

        }

        .playContainer {
            margin-top: 4rem;

            .playNumberItem {
                margin-top: 8rem;
                width: 100%;
                border-radius: 12rem;
                border-top: 1rem solid #E8E6EF;
                background: #FFF;
                box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);

                .topTitle {
                    border-radius: 12rem 12rem 0rem 0rem;
                    background: #FFEAEF;
                    line-height: 30rem;
                    color: #343C4B;
                    text-align: center;
                    font-size: 14rem;
                    font-weight: 600;
                }

                .content {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: 12rem;
                    box-sizing: border-box;

                    .left-bar {
                        flex: 1;
                        height: 100%;
                        justify-content: space-evenly;
                        flex-direction: column;
                        font-size: 12rem;
                        width: 15%;

                        div {
                            flex: 1;

                            &:not(:first-child) {
                                margin-top: 28rem;
                            }
                        }
                    }

                    .list {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 10rem 3rem;
                        width: 85%;
                        margin-left: 4rem;

                        .bottomData {
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 11rem;

                            .name {
                                color: #343C4B;
                                font-size: 12rem;
                                width: 15%;
                            }

                            .number {
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                            }

                            .rate {
                                line-height: 28rem;
                                text-align: center;
                                font-size: 14rem;
                                color: #343C4B;
                                font-weight: 600;
                            }

                            .input {
                                border-radius: 6rem;
                                width: 45rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                line-height: 24rem;
                                font-family: DIN;
                                font-size: 14rem;

                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                    }
                }
            }

            .playTypeItem {
                margin-top: 8rem;
                width: 100%;
                border-radius: 12rem;
                border-top: 1rem solid #E8E6EF;
                background: #FFF;
                box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);

                .entertainmentWrap {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: 12rem;
                    box-sizing: border-box;
                    height: 120rem;

                    .left-bar {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        font-size: 12rem;
                        width: 40rem;
                        height: 100%;

                        div {
                            flex: 1;
                            display: flex;
                            align-items: center;
                        }
                    }

                    .list {
                        display: grid;
                        grid-template-columns: repeat(5, 1fr);
                        grid-gap: 10rem;
                        flex: 1;

                        .bottomData {
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;

                            .name {
                                color: #343C4B;
                                font-size: 12rem;
                                width: 15%;
                            }

                            .number {
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                            }

                            .rate {
                                line-height: 28rem;
                                text-align: center;
                                font-size: 14rem;
                                color: #343C4B;
                                font-weight: 600;
                            }

                            .input {
                                border-radius: 6rem;
                                width: 40rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                line-height: 24rem;
                                font-family: DIN;
                                font-size: 14rem;

                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                    }
                }

                .colorWave {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    margin: 0 12rem;
                    padding: 12rem;

                    &+.colorWave {
                        border-top: 2rem solid #F1F5F9;
                    }

                    .top {
                        display: flex;
                        flex-direction: row;

                        .left {
                            width: 40rem;
                            color: #FF2D55;
                            font-size: 12rem;
                            font-weight: 600;
                        }

                        .list {
                            display: grid;
                            grid-template-columns: repeat(5, 1fr);
                            grid-gap: 10rem;
                            flex: 1;

                            &>div {
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                                background: linear-gradient(97deg, #FC6B6C 1.58%, #FB2973 110.2%);
                            }
                        }
                    }

                    .bottom {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 16rem;
                        color: #343C4B;

                        .btMLeft {
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            .title {
                                font-size: 12rem;
                                font-weight: 500;
                                width: 40rem;
                            }

                            .rate {
                                font-size: 14rem;
                                font-weight: 600;
                            }
                        }

                        .btmRight {
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            .label {
                                font-size: 12rem;
                                font-weight: 500;
                            }

                            .input {
                                margin-left: 16rem;
                                border-radius: 6rem;
                                width: 85rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                line-height: 28rem;
                                font-family: DIN;
                                font-size: 14rem;

                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                    }
                }

                .singleDoubleWrap {
                    padding: 12rem;
                    box-sizing: border-box;

                    .name {
                        color: #343C4B;
                        font-size: 12rem;
                        width: 18%;
                    }

                    .firstRow {
                        display: flex;
                        align-items: center;

                        .type {
                            width: 82%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .num1 {
                                width: 50rem;
                                line-height: 28rem;
                                text-align: center;
                                font-size: 14rem;
                                color: #FFF;
                                border-radius: 6rem;
                                background: linear-gradient(107deg, #FFD56A 0%, #FF8159 81.21%);
                            }

                            .num2 {
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                            }
                        }
                    }

                    .secondRow {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 8rem;

                        .Odds {
                            width: 84%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 30rem;
                            margin-right: 5rem;

                            >div {
                                color: #343C4B;
                                width: 48rem;
                                overflow: hidden;
                                font-size: 14rem;
                                font-weight: 600;
                                text-align: center;
                            }
                        }
                    }

                    .thirdRow {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 8rem;

                        .moneyInfo {
                            width: 84%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-right: 8rem;

                            .inputMoney {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 45rem;
                                margin-right: 2rem;
                                height: 26rem;

                                &>input {
                                    border-radius: 6rem;
                                    width: 45rem;
                                    border: 1rem solid #D8DFE7;
                                    background: #F1F5F9;
                                    line-height: 24rem;
                                    position: absolute;
                                    font-family: DIN;
                                    font-size: 14rem;

                                    &:focus {
                                        outline: none;
                                    }
                                }
                            }

                            .showMinWidth {
                                width: 37rem;

                                &>input {
                                    width: 37rem;
                                }
                            }
                        }
                    }
                }

                .constellationWrap {
                    padding: 12rem;
                    box-sizing: border-box;

                    .top {
                        display: flex;
                        flex-direction: row;

                        .left {
                            width: 40rem;
                            color: #FF2D55;
                            font-size: 12rem;
                            font-weight: 600;
                        }

                        .list {
                            display: grid;
                            grid-template-columns: repeat(5, 1fr);
                            grid-gap: 10rem;
                            flex: 1;

                            &>div {
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                                background: linear-gradient(97deg, #FC6B6C 1.58%, #FB2973 110.2%);
                            }
                        }
                    }

                    .bottom {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 16rem;
                        color: #343C4B;

                        .btMLeft {
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            .title {
                                font-size: 12rem;
                                font-weight: 500;
                                width: 40rem;
                            }

                            .rate {
                                font-size: 14rem;
                                font-weight: 600;
                            }
                        }

                        .btmRight {
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            .label {
                                font-size: 12rem;
                                font-weight: 500;
                            }

                            .input {
                                margin-left: 16rem;
                                border-radius: 6rem;
                                width: 85rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                line-height: 28rem;
                                font-family: DIN;
                                font-size: 14rem;

                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                    }
                }

            }
        }
    }

    .betAction {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12rem 16rem 12rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #fff;

        .winningRemark {
            display: flex;
            align-items: center;

            span {
                color: #707A8C;
                font-family: Inter;
                font-size: 14rem;
                margin-left: 6rem;
            }
        }

        .bet {
            width: 136rem;
            margin-left: 12rem;
        }

        .reset {
            background: #FFE8EE;
            width: 88rem;
            color: #FF2D55;
            border: none;
            margin-left: 25rem;
        }
    }

    .confirmBetPop {
        .popTitle {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 40rem;

            &>div {
                color: #343C4B;
                font-size: 16rem;
                font-weight: 600;
                background: linear-gradient(174deg, rgba(255, 175, 195, 0.15) 4.56%, #FFF 124.49%);
            }

            .closeIcon {
                position: absolute;
                top: 10rem;
                right: 10rem;
            }
        }

        .centerContent {
            padding: 16rem 24rem 24rem 24rem;
            box-sizing: border-box;

            .betDetail {
                width: 80%;
                margin: 0 auto;

                .detailRow {
                    .rowWrap {
                        display: flex;
                        flex-direction: column;
                        color: #707A8C;
                        font-size: 14rem;
                        margin-top: 15rem;
                        max-height: 260rem;
                        overflow-y: scroll;

                        .rowData {
                            margin-top: 15rem;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-around;
                        }

                        :first-child {
                            color: #343C4B;
                            margin-left: 2rem;
                        }

                        .money {
                            color: #FF6F1E;
                            margin-left: 18rem;
                        }
                    }

                    &>div {
                        color: #707A8C;
                        font-size: 14rem;
                        margin-top: 15rem;
                        display: flex;

                        :first-child {
                            color: #343C4B;
                            margin-left: 2rem;
                        }

                        .money {
                            color: #FF6F1E;
                            margin-left: 18rem;
                        }
                    }

                    .period {
                        color: #FF2D55 !important;
                    }

                    .totalMoney {
                        color: #FF2D55 !important;
                        text-align: center;
                        font-family: Inter;
                        font-size: 18rem;
                        font-style: normal;
                        font-weight: 600;
                    }
                }
            }

            .operateBtn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 24rem;

                .cancel {
                    width: 156rem;
                    color: #FF2D55;
                    font-size: 16rem;
                    background: #FFE8EE;
                    border: none;
                }

                .confirm {
                    width: 156rem;
                }
            }
        }

        .remarkContent {
            padding: 16rem;
            box-sizing: border-box;

            .titleName {
                color: #FF2D55;
                font-family: Inter;
                font-size: 14rem;
                font-style: normal;
                font-weight: 600;
                margin-top: 5rem;
            }

            .contentDetail {
                color: #707A8C;
                font-family: Inter;
                font-size: 14rem;
                margin-top: 5rem;
                line-height: 24rem;
            }
        }
    }
}